<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--移动端的兼容-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>注册账户</title>
		<!--公共部分的样式-->
		<link rel="stylesheet" type="text/css" href="../common_css/common.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<!--本页的样式-->
		<!--<link rel="stylesheet" type="text/css" href="css/registered_account.css" />-->
		<style type="text/css">

			/*最外层的div*/
			
			#account_statistic_main {
				width: 100%;
				min-width:3.2rem;
				height: 100%;
				background-color: #F7F7F7;
				overflow: auto;
				font-size:14px;
			}
			/*头部*/
			
			#account_statistic_header {
				width: 100%;
				height: 50px;
				background-color: #21538D;
				text-align: center;
				line-height: 50px;
				color: white;
				font-size: 1.38rem;
			}
			/*头部的左箭头*/
			
			#account_statistic_header span {
				float: left;
				font-size: 25px;
			}
			
			#account_statistic_header font {
				font-size: 1.38rem;
				margin-left: -20px;
			}
			/*身体*/
			
			#account_statistic_body {
				width: 100%;
				background-color: #F7F7F7;
				margin-top: 0.62rem;
			}
			/*主要内容的头像*/
			
			.forget_password_content {
				width: 100%;
				height: 13rem;
				/*border: 1px solid red;*/
				position: relative;
			}
			/*图片*/
			
			.forget_password_content_img {
				width: 6rem;
				height: 6rem;
				/*border: 1px solid red;*/
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin: auto;
			}
			
			.forget_password_content_img img {
				width: 6rem;
				height: 6rem;
			}
			/*请输入手机号的内容*/
			
			.forget_password_content_please {
				width: 100%;
				height: 3rem;
				/*border: 1px solid blue;*/
			}
			
			.forget_password_content_please div {
				width: 80%;
				height: 2.8rem;
				border: 1px solid #F6A623;
				border-radius: 5px;
				margin: auto;
				background-color: #FFFFFF;
				display: -webkit-box;
			}
			/*手机号输入的各种状态*/
			
			.forget_password_content_please_2 {
				width: 100%;
				height: 24px;
				/*border: 1px solid blue;*/
				/*margin-top: 10px;*/
			}
			
			.forget_password_content_please_2 div {
				width: 80%;
				height: 24px;
				/*border: 1px solid red;*/
				margin: auto;
				line-height: 24px;
				font-size: 12px;
				padding-left: 10px;
				display: -webkit-box;
			}
			
			.forget_password_content_please div span {
				display: inline-block;
				width: 40px;
				height: 30px;
				/*border: 1px solid blue;*/
				/*margin: 8px 0px 0px 5px;*/
				display: -webkit-box;
				-webkit-box-orient: horizontal;
			}
			
			.forget_password_content_please div span img {
				width: 24px;
				height: 24px;
				vertical-align: middle;
				margin: 10px 10px 0px 5px;
			}
			
			#forgetpassword_input,
			#forgetpassword_input_1 {
				display: -webkit-box;
				-webkit-box-flex: 1;
				height: 2.6rem;
				line-height: 2.6rem;
				border-radius: 5px;
				border: none;
				outline: none;
				font-size: 14px;
			}
			/*请输入验证码*/
			
			.forget_password_content_please1 {
				width: 100%;
				height: 3rem;
				/*border: 1px solid blue;*/
				/*margin-top: 20px;*/
			}
			
			#please1_center {
				width: 70%;
				height: 3rem;
				/*border: 1px solid red;*/
				margin: auto;
			}
			
			.content_please1_input {
				width: 50%;
				height: 3rem;
				border-radius: 5px;
				border: 1px solid #F6A623;
				float: left;
				color: #6B6B6B;
			}
			
			.content_please1_input input {
				width: 100%;
				height: 2.8rem;
				line-height: 2.8rem;
				font-size: 1rem;
				border-radius: 5px;
				border: none;
				outline: none;
				/*border: 1px solid red;*/
				padding-left: 10px;
			}
			
			.content_please1_set {
				width: 50%;
				height: 3rem;
				/*border: 1px solid green;*/
				float: left;
			}
			
			#get_code {
				width: 90%;
				height: 35px;
				float: right;
				font-size: 0.875em;
				margin: 3px 0px 0px 0px;
				line-height: 35px;
				border-radius: 5px;
				background-color: #F6A623;
				color: white;
				text-align: center;
				outline: none;
				border: none;
			}
			
			.content_please1_set div {
				width: 90%;
				height: 35px;
				float: right;
				font-size: 0.875em;
				margin: 6px 0px 0px 0px;
				line-height: 35px;
				border-radius: 5px;
				background-color: #F6A623;
				color: white;
				text-align: center;
			}
			/*确认*/
			.forget_password_content_confirm {
				width: 100%;
				height: 2.5rem;
				/*border: 1px solid blue;*/
				margin-top: 2.5rem;
			}
			
			.forget_password_content_confirm div {
				width: 40%;
				height: 2.5rem;
				margin: auto;
				line-height: 2.5rem;
				text-align: center;
				color: white;
				/*border: 1px solid red;*/
				background-color: #F6A623;
				border-radius: 5px;
			}
			
			#register_sure input {
				display: inline-block;
				width: 100%;
				height: 100%;
				background-color: #F6A623;
				color: white;
				border: none;
				outline: none;
				border-radius: 5px;
			}
			/*注册即视为同意 秒星APP用户协议*/
			
			.register_agree {
				width: 100%;
				height: 30px;
				text-align: center;
				line-height: 30px;
				font-family: "PingFangSC-Regular";
				font-size: 14px;
				color: #323232;
				letter-spacing: 0.3px;
				position: absolute;
				bottom:30px;
			}
			
			.istrue {
				color: green;
				border-color: green !important;
			}
			
			.isfalse {
				color: red;
				border-color: red !important;
			}
			
			.yellor {
				background: #F6A623 !important;
			}
		</style>
	</head>

	<body>
		<!--总div-->
		<div id="account_statistic_main">
			<!---头部-->
			<div id="account_statistic_header">
				<span class="iconfont icon-back icon_fanhui"></span>
				<font>注册账户</font>
			</div>
			<!--身体-->
			<div id="account_statistic_body">
				<!--居中的头像-->
				<div class="forget_password_content">
					<div class="forget_password_content_img">
						<img src="../commonimg/seelogo.png" />
					</div>
				</div>
				<!--请输入手机号-->
				<div class="forget_password_content_please">
					<div v-bind:class="{istrue:isactive_pho, isfalse:notactive_pho}"> <span><img src="../commonimg/用户昵称@2x.png"/></span>
						<input type="text" id="forgetpassword_input" placeholder="请输入手机号码" v-on:blur="judgment_phone" v-model="phonenumber" />
					</div>
				</div>
				<div class="forget_password_content_please_2">
					<div id="phone_num_error" v-bind:class="{istrue:isactive_pho, isfalse:notactive_pho}" v-html="falsephone"> </div>
				</div>
				<div class="forget_password_content_please">
					<div v-bind:class="{istrue:isactive_pas, isfalse:notactive_pas}"> <span><img src="../commonimg/密码@2x.png"/></span>
						<input type="text" id="forgetpassword_input_1" placeholder="输入6-20个字母、数字、下划线" v-on:blur="judgment_password" v-model="password" />
					</div>
				</div>
				<div class="forget_password_content_please_2">
					<div id="phone_num_error" v-bind:class="{istrue:isactive_pas, isfalse:notactive_pas}" v-html="falsepassword"> </div>
				</div>
				<!--请输入验证码-->
				<div class="forget_password_content_please1" style="margin-top: 20px;">
					<div id="please1_center">
						<div class="content_please1_input">
							<input id="please_center_code" type="text" placeholder="请输入验证码" />
						</div>
						<div class="content_please1_set">
							<input type="button" id="get_code" value="获取验证码" v-on:click = "getyan" v-bind:value="yanzhengma" v-bind:disabled="dis" v-bind:style="{background:bc_color}" :class="isactive_pas==true&&isactive_pho==true ? 'yellor' : ''" />
						</div>
					</div>
				</div>
				<!--请确认-->
				<div class="forget_password_content_confirm">
					<div id="register_sure"><input type="button" value="确认" /></div>
					<!--<input type="button" id="register_sure" value="确认" v-bind:disabled="dis" v-on:click="ready_regist" v-bind:style="{background:bc_color}" :class="isactive_pas==true&&isactive_pho==true ? 'yellor' : ''" />-->
				</div>
				<!--注册即视为同意 秒星APP用户协议-->
				<div class="register_agree">
					注册即视为同意 见到APP用户协议
				</div>
			</div>
		</div>
		<script src="../common_js/jquery-1.11.0.min.js"></script>
		<!--公共的点击预约的加号的按钮的跳转以及点击每页左上角的跳转-->
		<script src="../common_js/onclick_pop_view.js"></script>
		<script src="../common_js/vue.js"></script>
		<script type="text/javascript">
			//vue写的点击获取验证码时候的判断
			var myvue = new Vue({
				el: "body",
				data: {
					yanzhengma: "获取验证码",
					dis: true,
					phonenumber: "",
					password: "",
					falsephone: "",
					isactive_pho: false,
					notactive_pho: false,
					isactive_pas: false,
					notactive_pas: false,
					falsepassword: '',
					bc_color: "gray"
				},
				methods: {
					getyan:function  () {
						//vue里边的这个this指向vue
//			           console.log(this);
                         console.log(1)
			           var timess = 10;
			           //在外边定义一个tthis,用来指向vue的这个this
			           var tthis = this;
			           var ting = setInterval(function  () {
			           	 if (timess==-1) {
			           	 	clearTimeout(ting);
			           	  tthis.yanzhengma = "获取验证码";   
			           	  tthis.dis=false;
			           	  timess=60;
			           } else{
			           	//此时的this指向window
//			           	console.log(this)
			           	   tthis.yanzhengma = "重新获取"+timess+"";
			           	  tthis.dis=true;
			           	  timess--;
			           }
			           },1000);
			           
			          

					},
					//					手机号的验证
					judgment_password: function() {
						var al = this;
						var registPhone = al.password;
						console.log(registPhone);
						var registPassword = al.password;
						var passw = /^(\w){6,20}$/g;
						if(passw.test(registPassword) != true) {
							al.notactive_pas = true;
							al.falsepassword = "<p>请输入正确的格式</p>";
							al.dis = true;
							al.bc_color = "gray"
						} else {
							al.notactive_pas = false;
							al.isactive_pas = true;
							console.log(al.isactive_pas);

							al.falsepassword = "<p>输入正确</p>";
							al.dis = false;
						}
					},
					//密码的验证
					judgment_phone: function() {
						var that = this
						var registPhone = that.phonenumber;
						console.log(registPhone);
						var registPassword = that.password;
						var phones = /^1[3|4|5|7|8][0-9]{9}$/g;
						if(phones.test(registPhone) != true) {
							that.notactive_pho = true;
							that.falsephone = "	<p>请输入正确的格式</p>";
							that.dis = true;
							that.bc_color = "gray"
						} else {
							that.notactive_pho = false;
							that.isactive_pho = true;
							console.log(that.isactive_pho);
							that.falsephone = "	<p>输入正确</p>";
							that.dis = false;
						}
					},

					//一个公共的方法
					common: function() {
						var that = this
						if(that.falsepassword == "<p>输入正确</p>" && that.falsephone == "<p>输入正确</p>") {
							that.dis = true;
							that.bc_color = "#F6A623";
						} else {
							that.dis = false;
							that.bc_color = "gray";
						}
					}
				}
			});
			//			发送验证码的接口
			$("#get_code").on("click", function() {
				var user_phonenum_val = $("#forgetpassword_input").val();
				$.ajax({
					type: "GET",
					url: "http://119.23.224.92/jiandao/user/sendPass",
					async: true,
					data: {
						"mobile":user_phonenum_val
					},
					success: function(data) {
						console.log(data);
					},
				});
			});
			//			点击确认时的跳转
			$("#register_sure").on("click", function() {
				var user_password = $("#forgetpassword_input_1").val();
				var user_phonenum_val = $("#forgetpassword_input").val();
				var user_code = $("#please_center_code").val();
				$.ajax({
					type: "POST",
					url: "http://119.23.224.92/jiandao/user/regist",
					async: true,
					data: {
						"user_tel": user_phonenum_val,
						"user_pwd": user_password,
						"no": user_code
					},
					success: function(data) {
						console.log(data);
					},
					error: function(err) {
						console.log("错误");
						console.log(err);
					}
				});
				// 在没有进行任何判断的时候进行的跳转
				//location.href = "../register_sucess/register_success.html";
			});
		</script>
	</body>

</html>